<template>
  <a-image v-if="onlyImage" :src="fileIcon(url)" />
  <a class="text" target="_blank" :href="url" v-else>
    <div style="display: flex;align-items:center;height: 35px" @mouseover="showDownload=true" @mouseout="showDownload=false">
      <i v-show="showDownload" class="el-icon-download down" />
      <a-image v-show="!showDownload" :preview="false" :src="fileIcon(url)" style="width: 32px;height: 32px;"></a-image>
      &nbsp;&nbsp;{{ lastName(url,filename) }}
    </div>
  </a>
</template>

<script>
import {defineComponent,ref} from "vue";
import {lastName,fileIcon} from '@/utils'
export default defineComponent({
  name: 'ExDownloadFile',
  props: {
    filename: String,
    url: String,
    onlyImage:Boolean
  },
  setup(props){
    const showDownload = ref(false)
    return {
      lastName,
      fileIcon,
      showDownload
    }
  }
})
</script>

<style lang="scss" scoped>
.text{
  color: rgba(0,0,0,.85);
}
.text:hover{
  color: var(--ant-primary-color);
}
</style>
